<template>
  <div class="w">
    <div class="ty">
      视频标题:<input
        v-model="title"
        type="text"
        class="box"
        :placeholder="text"
      />
      <br />
    </div>
    <div class="ty">
      关联老师:<select v-model="teacher" class="box">
        <option value="">请选择关联老师</option>
        <option value="0">杰杰</option>
        <option value="1">兵兵</option>
        <option value="2">帅帅</option>
      </select>
      <br />
    </div>
    <div class="ty">
      选择类型分类:
      <select v-model="cate" class="box1">
        <option value="">选择一级分类</option>
        <option value="0">线下</option>
        <option value="1">线上</option>
        <option value="2">其他</option>
      </select>
      <br />
    </div>
    <div class="ty">
      关联校区:
      <select v-model="school" class="box1">
        <option value="">选择校区(非必选)</option>
        <option value="0">黑马</option>
        <option value="1">尚硅谷</option>
        <option value="2">博学谷</option>
      </select>
      <br />
    </div>
    <div class="ty ding">
      选择收费模式:
      <input
        type="radio"
        @click="show = true"
        value="0"
        v-model="moneyMode"
      />收费
      <div style="margin-left: 20px">
        <span>输入购买的费用</span>
        <input
          type="text"
          v-model.number="moneyCount"
          v-show="show"
          style="width: 150px; height: 20px"
        />
      </div>
      <input
        type="radio"
        @click="show = false"
        value="1"
        v-model="moneyMode"
      />免费
    </div>
    <br />
    <div class="ty">
      视频简介 <input v-model="des" type="text" class="box" :placeholder="ts" />
    </div>
    <br />
    <div class="ty">
      视频详情 <input v-model="videoDetail" type="text" class="box2" />
    </div>
    <br />
    <div class="ty">
      开售时间
      <input type="radio" value="0" v-model="timeModel" /> 立即开售 <br />
      <input class="right" type="radio" value="1" v-model="timeModel" />定时开售
      <input
        style="width: 300px; height: 40px; margin-left: 20px"
        type="text"
        v-model="timeCount"
        :placeholder="text1"
      />
      <br />
      <input class="right" type="radio" value="2" v-model="timeModel" />
      暂不开售
    </div>
    <button @click="submit" style="margin-left: 730px">保存</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '  输入音频标题名称(建议填写字数4-15)',
      text1: '  开售时间2022.12.31  0:0:0',
      teacher: '0',
      cate: '0',
      school: '0',
      ts: '  输入分享描述',
      show: true,
      moneyMode: '',
      timeModel: '',
      timeCount: '',
      title: '',
      des: '',
      videoDetail: '',
      moneyCount: '',
    }
  },
  methods: {
    submit() {
      console.log({
        title: this.title,
        teacher: this.teacher,
        cate: this.cate,
        moneyMode: this.moneyMode,
        moneyCount: this.moneyCount,
        des: this.des,
        videoDetail: this.videoDetail,
        timeModel: this.timeModel,
      })
    },
  },
}
</script>

<style lang="less">
.w {
  width: 1200px;
  margin: 0 auto;
  .ty {
    margin-bottom: 20px;
  }
  .box {
    width: 700px;
    height: 50px;
  }
  .box1 {
    width: 200px;
    height: 50px;
  }
  .box2 {
    width: 700px;
    height: 200px;
  }
  .right {
    margin-left: 74px;
  }
  .ding {
    // width: 100px;
    // height: 20px;
    display: flex;
  }
}
</style>
